<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>数据分析</title>
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.112/Build/Cesium/Cesium.js"></script>
  <script type="module" src="./scripts/app.js" defer></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.114/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
  <style>
    html, body, #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    #panel-wrapper {
      position: absolute;
      top: 10px;
      left: 10px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      z-index: 1000;
    }

    /* 控制面板 */
    #control-panel {
      background: rgba(255, 255, 255, 0.9);
      padding: 10px;
      border-radius: 6px;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
      max-width: 180px;
    }

    #control-panel h3 {
      margin-top: 10px;
      margin-bottom: 5px;
      font-size: 16px;
      border-bottom: 1px solid #ccc;
      padding-bottom: 2px;
    }

    #control-panel button {
      display: block;
      margin: 6px 0;
      width: 100%;
    }

    #network-panel {
      position: absolute;
      top: 10px;
      left: 210px; /* 紧挨 control-panel */
      background: rgba(255, 255, 255, 0.9);
      padding: 10px 14px;
      border-radius: 6px;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
      z-index: 1000;
      max-width: 500px;
      height: auto; /* 自动高度 */
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    #network-panel h3 {
      margin: 0 0 4px 0;
      font-size: 16px;
      border-bottom: 1px solid #ccc;
      padding-bottom: 2px;
    }

    #network-panel .stats-inline {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 12px;
      white-space: nowrap;
      font-size: 14px;

      /* font-size: 12px;
      line-height: 1.2; */
    }

    .stats-inline .metric {
      margin-right: 20px; 
    }

  </style>
</head>
<body>
  <div id="cesiumContainer"></div>

  <!-- 控件面板 -->
  <div id="panel-wrapper">
    <div id="control-panel">
      <h3>SBEB 演示</h3>
      <button id="btn-cluster">显示边聚类</button>
      <button id="btn-skeleton">显示骨架提取</button>
      <button id="btn-warp">显示变形边</button>

      <h3>FDEB 演示</h3>
      <button id="btn-run-fdeb">运行FDEB</button>
      <button id="btn-fdeb">显示FDEB结果</button>

      <h3>重置</h3>
      <button id="btn-reset">🔄 重置SBEB&FDEB</button>
    </div>

    <div id="network-panel">
      <h3>数据网络特征值</h3>
      <div class="stats-inline">
        <span id="node-count" class="metric">点数：<span id="value-nodes"></span></span>
        <span id="edge-count" class="metric">边数：<span id="value-edges"></span></span>
        <span id="degree-info" class="metric">平均度：<span id="value-degree"></span></span>
        <span id="betweenness-info" class="metric">平均介数值：<span id="value-betweenness"></span></span>
      </div> 
    </div>
  </div>
</body>
</html>

